<template>
	<div class="icons">
		<swiper :options="swiperOption">
			<swiper-slide v-for="(page,index) of pages" :key="index">
				<div class="icon" v-for="item of page" :key="item.id">
					<div class="icon-img">
						<img class="icon-img-content" :src='item.imgUrl' alt="">
					</div>
					<p class="icon-desc">{{item.dsc}}</p>
				</div>
			</swiper-slide>		
		</swiper>
	</div>
</template>
<script>
	export default {
		name:'HomeIcons',
		props:{
			iconList:Array
		},
		data () {
			return {
				swiperOption:{
					autoplay:false
				}
			}
		},
		computed:{
			pages: function() {
				const pages = []
				this.iconList.forEach(function(item,index){
					const page = Math.floor(index / 8)
					if(!pages[page]){
						pages[page] = []
					}
					pages[page].push(item)				
				})
				return pages
			}
		}
	}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
@import '~styles/mixins.styl'
	.icons>>>.swiper-container
		height:0
		padding-bottom:50%
	.icon
		overflow:hidden
		float:left
		width:25%
		height:0
		padding-bottom:25%
		position:relative
		.icon-img
			position:absolute
			left:0
			top:0
			width:100%
	.icons
		margin-top:.1rem
		.icon
			overflow:hidden
			float:left
			height:0
			padding-bottom:25%
			position:relative
			.icon-img
				position:absolute
				left:0
				top:0
				width:100%
				height:0
				bottom:0.44rem
				padding:.1rem
				box-sizing:border-box
				.icon-img-content
					display:block
					margin:0 auto
					width:75%
			.icon-desc
				display:block
				position:absolute
				right:0
				bottom:.2rem
				color:$darkTextColor
				width:100%
				text-align:center
				ellipsis()
					
</style>